<template>
    <view class="active-form form-container">
        <view class="form-box">
            <block v-for="(item, index) in formData" :key="item.id">
                <view class="form-item flex-row--c">
					<view class="mask" v-if="!isEdit" @click="tapMask(item)"></view>
					
                    <!-- 文本框 -->
                    <view class="textarea-box" v-if="item.type == 'textarea'">
                        <view :class="item.required ? '' : 'p-l14 '">
                            <text class="colorRed" v-if="item.required">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                        </view>
                        <view class="line-bottom-textarea">
                            <textarea
                                style="color: #000; font-size: 30rpx;min-height: 120rpx;width: 100%;"
                                auto-height
                                :maxlength="-1"
								:disabled="item.disabled"
                                :placeholder="item.placeholder"
								placeholder-class="plaClass"
                                v-model="item.value"
                                @input="inputVal(index)"
                            >
                            </textarea>
                        </view>
                    </view>
					
					<!-- 数字文本框 -->
					<view class="number-box" v-else-if="item.type === 'number'">
					    <view :class="item.required ? '' : 'p-l14 '">
					        <text class="colorRed" v-if="item.required">*</text>
					        <text class="num" v-if="num">{{ index + 1 }}.</text>
					        {{ item.label }}({{item.unit}})
					    </view>
					    <view class="line-bottom-textarea">
					        <!-- placeholder-class="plaClass" -->
					        <input
					            type="number"
					            class="number"
					            :disabled="item.disabled"
					            placeholder-style="font-size: 26rpx;"
					            :placeholder="item.placeholder"
					            v-model="item.value"
					            @input="inputVal(index)"
					        >
					        </input>
					    </view>
					</view>

                    <!-- 单选框 -->
                    <view class="line-col" v-else-if="item.type === 'radio'">
                        <view :class="item.required ? 'line-left' : 'p-l14 line-left'">
                            <text class="colorRed" v-if="item.required">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                            <text
                                style="
                            font-size: 20rpx;
                            color: #9e9e9e;
                            margin-left: 23rpx;
                            width: 140rpx;
                            "
                            >(单选)
                            </text>
                        </view>
                        <view
                            class="line-bottom-select"
                        >
							<c-radio-group
							    v-model="formData[index].value"
							    @change="radioChange($event, index)"
							    placement="column"
							>
							    <c-radio
							        v-for="(radioItem, radioIndex) in item.list"
							        :key="radioIndex"
							        :name="radioItem.label"
							    >
							    </c-radio>
							</c-radio-group>
                        </view>
                    </view>
					
                    <!-- 多选框 -->
                    <view class="line-col" v-else-if="item.type == 'checkbox'">
                        <view :class="item.required ? 'line-left' : 'p-l14 line-left'">
                            <text class="colorRed" v-if="item.required">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                            <text
                                style="
                             font-size: 20rpx;
                             color: #9e9e9e;
                             margin-left: 23rpx;
                             width: 140rpx;
                             "
                            >(多选)
                            </text>
                        </view>
                        <view
                            class="line-bottom-select pr20"
                        >
                            <u-checkbox-group
								style="padding-left: 14rpx;"
                                v-model="formData[index].value"
                                @change="checkboxGroupChange($event,item)"
                            >
                                <u-checkbox
                                    icon-size="25rpx"
                                    label-size="25rpx"
                                    size="30rpx"
                                    v-for="(checkboxItem, checkboxIndex) in item.list"
                                    :key="checkboxIndex"
                                    :label="checkboxItem.name"
									:disabled="checkboxItem.disabled"
                                    :name="checkboxItem.name"
                                >
                                </u-checkbox>
                            </u-checkbox-group>
                        </view>
                    </view>
					
					<!-- 上传图片 -->
					<view class="img-box pt30 flex-col-l" v-else-if="item.type == 'file'">
					    <view class="font26" :class="item.required ? '' : 'p-l14 '">
					        <text class="colorRed" v-if="item.required">*</text>
					        <text class="num" v-if="num">{{ index + 1 }}.</text>
					        {{ item.label }}
					    </view>
					    <view class="img-upload p30">
					        <c-upload
					            v-model="item.fileList"
					            :sourceType="item.sourceType"
					            :sizeType="item.sizeType"
					        ></c-upload>
					    </view>
					</view>
					
					<!-- 设备 -->
					<view class="device-box" v-else-if="item.type == 'device'">
					    <view :class="item.required ? '' : 'p-l14 '">
					        <text class="colorRed" v-if="item.required">*</text>
					        <text class="num" v-if="num">{{ index + 1 }}.</text>
					        设备
					    </view>
					    <view class="line-bottom-textarea device-box-content">
					        <view class="select ellipsis" @click="tapDevice">
								<view class="select__left">
									{{item.deviceName}}
								</view>
					        	<u-icon name="arrow-right" color="#d9d9d9"></u-icon>
					        </view>
							<view class="code" @click="tapCode">
								<image src="@/static/theme/default/home/form/code.png" mode=""></image>
							</view>
					    </view>
					</view>
                    
                </view>
				
				<u-gap height="10" bgColor="#efefef"></u-gap>
            </block>
        </view>
    </view>
</template>

<script>
import mixins from "./mixins";
import cRadioGroup from '@/components/custom/c-radio-group/c-radio-group.vue';
import cRadio from '@/components/custom/c-radio/c-radio.vue';
import cUpload from '@/components/custom/c-upload/c-upload.vue'

export default {
    name: "activeForm",
	components: {
		cRadioGroup,
		cRadio,
		cUpload
	},
    mixins: [mixins],
    props: {
        //是否展示序号
        num: {
            type: Boolean,
            default: false,
        },
        value: {
            type: Array,
            default: () => {
                return [];
            },
        },
        //是否编辑表单
        isEdit: {
            type: Boolean,
            default: false,
        },
        //是否能删除
        isDel: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            submitData: "",
            selectBox: [],
            currentSelectIndex: "",
            currentSelectValue: "",
            codeFont: "获取验证码",
            wait: 60,
            isSend: false,
        };
    },
    computed: {
        formData: {
            get() {
                // console.log("this.formData", this.value)
                return this.value
            },
            set(nval) {
                this.$emit("input", nval);
            }
        }
    },
    methods: {
        //input输入框的值传给父组件
        inputVal(index) {
            const data = {
                val: this.formData[index].value,
                index: index,
            };
            if (String(data.val) != "" && String(data.index) != "") {
                this.formData[data.index].value = data.val;
            }
            this.$emit("input", this.formData);
        },
        //单选 点击触发
        radioChange($event, index) {
            this.$emit("input", this.formData);
        },
        //复选框 点击触发
        checkboxGroupChange($event, item) {
            // console.log("$event", $event)
            const selectArr = item.list.filter((v => ($event.includes(v.name)))) //过滤
            // console.log("selectArr", selectArr)
            item.value = selectArr.map(v => (v.value))
            this.$emit("input", this.formData);
        },
        //校验
        $vervify() {
            this.formData.forEach((item) => {
                if (item.required) {
                    switch (item.type) {
                        case "checkbox":
                            if (!item.value || item.value.length == 0) {
                                uni.showToast({
                                    title: item.errMess || "请选择" + item.label,
                                    duration: 2000,
                                    icon: "none",
                                });

                                throw Error(); //终止函数
                            }
                            break;
                        case "file":
                            if (!item.fileList || item.fileList.length == 0) {
                                uni.showToast({
                                    title: item.errMess || "请选择" + item.label,
                                    duration: 2000,
                                    icon: "none",
                                });

                                throw Error(); //终止函数
                            }
                            break;
						case "device":
						    if (!item.deviceName) {
						        uni.showToast({
						            title: item.errMess || "设备不能为空",
						            duration: 2000,
						            icon: "none",
						        });
						    
						        throw Error(); //终止函数
						    }
						    break;
                        default:
                            if (!item.value) {
                                uni.showToast({
                                    title: item.errMess || item.label + "不能为空",
                                    duration: 2000,
                                    icon: "none",
                                });

                                throw Error(); //终止函数
                            }
                            if (item.regexp && !(new RegExp(item.regexp).test(item.value))) {
                                uni.showToast({
                                    title: item.label + "格式不正确",
                                    duration: 2000,
                                    icon: "none",
                                });

                                throw Error(); //终止函数
                            }
                            break;
                    }
                }
            });
        },
        // 提交序列化的表单
        $submitForm() {
            const formData = this.formData
            console.log("formData :>> ", formData);
            let submitData = {};
            for (let i = 0; i < formData.length; i++) {
                if (formData[i].type === 'file') {
                    submitData[formData[i].name] = formData[i].fileList;
                    break;
                }
                submitData[formData[i].name] = formData[i].value;

            }
            return submitData;
        },
		/**
		 * 点击遮罩层
		 * @param {Object} v
		 */
		tapMask(v) {
			this.$emit('tapMask',v)
		},
		tapDevice() {
			this.$emit('tapDevice')
		},
		tapCode() {
			this.$emit('tapCode')
		}
    },
};
</script>

<style lang="scss" scoped>
.active-form {
    .plaClass {
        font-size: 28rpx;
    }

    .form-box {
        width: 100%;
        box-sizing: border-box;
    }
	
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
	}
	
	.form-item {
		padding: 20rpx 0;
		position: relative;
	}

    .colorRed {
        color: red;
        padding: 0 10rpx;
    }

    .line-right {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .line-bottom-select {
        padding-top: 20rpx;
		padding-left: 20rpx;
    }

    .line-bottom-textarea {
        padding-top: 20rpx;

        textarea {
			
        }
    }

    .line-left {
        display: flex;
        min-width: 22%;
        align-items: center;
        height: 100%;
        letter-spacing: 0.5px;
        font-size: 26rpx;
        color: #000000;
        box-sizing: border-box;
    }

    .p-l14 {
        padding-left: 34rpx;
    }

    .textarea-box {
        width: 100%;
        font-size: 26rpx;

        textarea {
            padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
            height: 100rpx;
            font-size: 25rpx;
            color: #333;
        }
    }

    .line {
        padding: 27rpx 0;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        overflow: hidden;

        .input {
            padding-right: 20rpx;
            height: 100%;
            width: 100%;
            text-align: left;
            font-size: 28rpx;
            color: #333;
            border: none;
            overflow: hidden;
            text-overflow: ellipsis;
            outline: none;
        }
    }
	
	.number-box {
        width: 100%;
		box-sizing: border-box;
		
		input {
			height: 100%;
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
		}
	}

    .line-col {
        padding: 27rpx 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;

        .input {
            padding-right: 20rpx;
            height: 100%;
            width: 100%;
            text-align: left;
            font-size: 28rpx;
            color: #333;
            border: none;
            overflow: hidden;
            text-overflow: ellipsis;
            outline: none;
        }
    }

    .num {
        margin-right: 8rpx;
    }
}

.device-box {
    width: 100%;
	
	&-content {
		display: flex;
		align-items: center;
		padding: 34rpx;
		box-sizing: border-box;
	}
}

.select {
	flex: 1;
	height: 80rpx;
	border-radius: 10rpx;
	border: 5rpx solid #bae0ff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10rpx;
	box-sizing: border-box;
	
	&__left {
		font-size: 26rpx;
	}
}

.code {
	margin-left: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	
	image {
		width: 60rpx;
		height: 60rpx;
	}
}

.active-form .u-radio, .active-form .u-checkbox {
	margin: 0 !important;
}

.line-bottom-select /deep/ .u-checkbox-label--left {
	width: 100%;
	margin: 20rpx 0;
}

.line-bottom-select /deep/ .u-checkbox-group .u-checkbox .u-checkbox__icon-wrap + text {
	display: inline-block;
	border-bottom: 1rpx solid #eee;
	padding: 35rpx 0;
	width: 100%;
	line-height: 35rpx !important;
	word-break: break-all;
}
</style>
